<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="/css/common.css"/>
  <link rel="stylesheet" type="text/css" href="/css/main.css"/>
  <link rel="stylesheet" type="text/css" href="/css/ui-dialog.css"/>
  <script type="text/javascript" src="/js/libs/modernizr.min.js"></script>
  <script type="text/javascript" src="/js/jquery-1.10.2.min.js"></script>
  <script type="text/javascript" src="/js/dialog-min.js"></script>
  <title>用户预约叫号</title>
</head>
<body>
  <table class="insert-tab">
    <tbody>
    <tr>
      <th><i class="require-red">*</i>业务类型：</th>
      <td>
        <select id="businessId" onchange="changeBusinessDesc();">
          <%for(business in businessList){%>
          <option value="${business.id }">${business.name }</option>
          <%}%>
        </select>
      </td>
    </tr>
    <tr>
      <th>OpenID(微信用户填写)：</th>
      <td><input class="common-text required" type="text" id="openId"></td>
    </tr>
    <tr>
      <td>业务介绍</td>
      <td><div id="businessDesc">${businessList[0].desc!'' }</div></td>
    </tr>
    <tr>
      <th></th>
      <td>
        <input type="button" class="btn btn8 btn-primary" value="微信预约" onclick="weixinOrder();">
        <input type="button" class="btn btn8 btn-primary" value="叫号机预约" onclick="liveOrder();">
      </td>
    </tr>
    </tbody>
  </table>

  <div id="error" style="padding-top:30px; display:none;">
    <span id="errorCode"></span><br/>
    <span id="errorMessage"></span>
  </div>
  <div id="result" style="padding-top:30px; display: none;">
      <table border="1">
        <tr>
          <td width="100px">预约号码</td>
          <td width="100px"><span id="orderNumber"></span></td>
        </tr>
        <tr>
          <td>前方排队人数</td>
          <td><span id="queueCount"></span></td>
        </tr>
      </table>
  </div>
<script language="JavaScript">
  function weixinOrder() {
    var businessId = $("#businessId").val();
    var openId = $("#openId").val();
    var url = "/queue/add?user_type=0&business_id=" + businessId + "&open_id=" + openId;
    $.ajax({
      type: 'GET',
      url: url,
      success: function (data) {
        if(data.errorCode != 0) {
          $('#errorCode')[0].innerHTML = data.errorCode;
          $('#errorMessage')[0].innerHTML = data.errorMessage;
          $('#error').show();
          $('#result').hide();
        } else {
          $('#orderNumber')[0].innerHTML = data.orderNumber;
          $('#queueCount')[0].innerHTML = data.queueCount.count;
          $('#result').show();
          $('#error').hide();
        }
      }
    });
  }

  function liveOrder() {
      var businessId = $("#businessId").val();
      var url = "/queue/add?user_type=1&business_id=" + businessId;
      $.ajax({
        type: 'GET',
        url: url,
        success: function (data) {
          $("#errorCode")[0].innerHTML = data.errorCode;
          $("#errorMessage")[0].innerHTML = data.errorMessage;
          $("#orderNumber")[0].innerHTML = data.orderNumber;
          $("#queueCount")[0].innerHTML = data.queueCount.count;
          $("#result").show();
        }
      });
  }

  function changeBusinessDesc() {
    var businessId = $("#businessId").val();
    var url = "/queue/getBusiness?business_id=" + businessId;
    $.ajax({
      type: 'GET',
      url: url,
      success: function (data) {
        $("#businessDesc")[0].innerHTML = data.desc;
      }
    });
  }
</script>
</body>
</html>